<template>

    <div class="login_container"><!--定义一个容器-->
        <div style=" background-color: #fff; width:350px; height:300px;padding: 20px; border-radius:10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);">
            <!--系统名称区域-->
            <div style="height: 60px; line-height: 60px; text-align: center">
                <img alt="" style="width: 20px; position: relative; top: 5px;" />
                <b style="color: #303133; font-weight: bold">
                    人力资源管理系统
                </b>
            </div>
            <el-form :rules="LoginRule" :model="LoginForm" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input size="medium" placeholder="请输入账号" style="margin: 10px 0" prefix-icon="iconfont icon-denglu"
                        v-model.trim="LoginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="medium" placeholder="请输入密码" style="margin: 10px 0" prefix-icon="iconfont icon-mima"
                        show-password v-model.trim="LoginForm.password"></el-input>
                </el-form-item>
                <div style="margin: 20px 0; text-align: center">
                    <el-form-item>
                        <el-button type="primary" size="medium" style="width:100%" @click="Login">登 录</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            //定义表单数据
            LoginForm: {
                username: "admin01",
                password: "123456"
            },
            //定义用户名、密码的规则
            LoginRule: {
                //校验用户名
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },//required:是否为必填项，blur为聚焦事件,message为提示信息
                    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }//blur为聚焦事件
                ],
                //校验密码
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },//required:是否为必填项，blur为聚焦事件,message为提示信息
                    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }//blur为聚焦事件
                ],
            },
        }
    },
    methods: {
        MiMaXianShi() {
            this.type = 'password';
        },
        //登录验证
        Login() {
            this.$refs.loginFormRef.validate(async valid => {
                //如果验证不成功，则跳出去
                if (!valid) return;
                //验证成功，请求login
                const { data: res } = await this.$http.post("login", this.LoginForm);

                if (res == "ok") {
                    this.$message.success("登录成功！！！");
                    //成功之后，则跳转到首页
                    this.$router.push({ path: "/home" })
                }
                else {
                    this.$message.error("登录失败！！！")
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.login_container {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/beijing.png");
    height: 100vh;
    overflow: hidden;
}
</style>